<template>
  <a-modal
    title="线索集"
    :visible="showModel"
    width="80%"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="close">
    <a-form-model layout="inline">
      <a-form-model-item label="关键词">
        <a-input v-model="queryParam.keyword" placeholder="请选择关键词" style="width: 200px"></a-input>
      </a-form-model-item>
      <a-form-model-item label="来源">
        <a-select v-model="queryParam.cluesSource" placeholder="请选择来源" style="width: 200px">
          <a-select-option value="1">爬虫</a-select-option>
          <a-select-option value="2">用户爆料</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary">查询</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">
      <template slot="sourceSlot" slot-scope="text, record">
        <div v-if="record.cluesSource == 1">爬虫</div>
        <div v-if="record.cluesSource == 2">用户爆料</div>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
  //查看线索集弹窗
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {postAction} from "@/api/manage";

  export default {
    name: "TopicClueModel",
    mixins: [JeecgListMixin],
    props: ['taskNo'],
    data() {
      return {
        showModel: false,
        confirmLoading: false,
        loading: false,
        queryParam: {
          keyword: ''
        },
        columns: [{
          title: '关键词',
          align: 'center',
          dataIndex: 'keyword',
          width: 80
        },
          {
            title: '线索标题',
            align: 'center',
            width: 150,
            dataIndex: 'cluesTitle'
          },
          {
            title: '来源',
            align: 'center',
            width: 80,
            dataIndex: 'cluesSource',
            scopedSlots: {
              customRender: 'sourceSlot'
            }
          },
          {
            title: '转发数',
            align: 'center',
            width: 80,
            dataIndex: 'forwardNum'
          },
          {
            title: '评论数',
            align: 'center',
            width: 80,
            dataIndex: 'remarkNum'
          },
          {
            title: '阅读量',
            align: 'center',
            width: 80,
            dataIndex: 'readNum'
          },
          {
            title: '发布时间',
            align: 'center',
            width: 120,
            dataIndex: 'releaseTime'
          }
        ],
        //一下接口是老的
        url: {
          list: '/clues/list',
          initKeywordList: '/clues/initKeywordList',
          queryById: 'clues/queryById',
          queryListByIds: '/clues/queryListByIds'
        },
      }
    },
    methods: {
      handleOk() {
        if (this.selectedRowKeys.length !== 0 && this.selectionRows.length === 0) {
          //数据没有改变，不调用接口
          this.close();
          return
        }
        this.loading = true;
        //修改线索信息
        const clueIdList = this.selectionRows.map(item => item.id);
        postAction('task/taskInfo/updateTaskClueInfo', {taskNo: this.taskNo, clueIdList}).then(res => {
          if (res.success) {
            const clues = this.selectionRows.map(item => {
              return {id: item.id, cluesTitle: item.cluesTitle}
            });
            this.$emit('updateClues', clues);
            this.showModel = false;
          } else {
            this.$message.error(res.message);
          }
        }).catch(error => console.log(error))
          .finally(() => {
            this.loading = false;
          });
      },
      close() {
        this.showModel = false;
      },
      show(selectedKeys) {
        this.selectedRowKeys = selectedKeys;
        this.showModel = true;
      }
    }
  }
</script>

<style scoped>

</style>